<template>
    <el-dialog title="选择用户" :visible.sync="visibleInChild" :append-to-body="appendToBody" width="900px"
               height="600px" :before-close="close">
        <div class="">
            <el-row :gutter="5">
                <el-col :span="6">
                    <div>
                        <el-input v-model="filterText" placeholder="请输入部门过滤条件" style="margin-bottom:10px"/>
                        <el-tree
                                ref="_selectOrgTree"
                                :data="treeData"
                                default-expand-all
                                node-key="id"
                                :props="defaultProps"
                                :filter-node-method="filterNode"
                                @node-click="handleNodeClick"
                                class="filter-tree"
                        />
                    </div>
                </el-col>
                <el-col :span="12">
                    <div>
                        <div class="filter-container">
                            <!-- <el-input v-model="listQuery.userId" placeholder="用户ID" style="width: 200px;"
                                      class="filter-item"
                                      @keyup.enter.native="btnQuery"/> -->
                            <el-input v-model="listQuery.userName" placeholder="用户姓名" style="width: 200px;"
                                      class="filter-item"
                                      @keyup.enter.native="btnQuery"/>
                            <el-dropdown split-button type="primary" @click="btnQuery" class="filter-item">
                                <i class="el-icon-search el-icon--left"></i>查询
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <el-table
                                :data="records"
                                ref="_sysUserTable"
                                @row-click="rowClick"
                                border
                                fit
                                highlight-current-row
                                height="337"
                                style="width: 100%;"
                                :cell-style="{padding:'3px'}"
                        >
                            <!--<el-table-column v-if="multipleSelect" type="selection" align="center">
                            </el-table-column>-->
                            <!-- <el-table-column label="用户ID" prop="userId" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.account }}</span>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="用户姓名" prop="userName" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.realName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="所属机构" prop="orgName" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.deptName }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination v-show="total>0" :total="total" :current.sync="listQuery.current"
                                    :size.sync="listQuery.size" @pagination="listSysUsers"/>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <div style="margin-bottom:10px">
                            <el-button icon="el-icon-remove" type="primary" @click="btnRemoveAll">清空</el-button>
                        </div>
                        <el-table
                                :data="selectedRecords"
                                border
                                fit
                                highlight-current-row
                                height="337"
                                style="width: 100%;"
                                :cell-style="{padding:'3px'}"
                        >
                            <!-- <el-table-column label="用户ID" prop="userId" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.account }}</span>
                                </template>
                            </el-table-column> -->
                            <el-table-column label="用户姓名" prop="realName" align="center">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.realName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="multipleSelect" label="操作" align="center">
                                <template slot-scope="{row}">
                                    <i class="el-icon-delete el-icon--left" style="cursor:pointer"
                                       @click="btnRemove(row)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
            <div class="fieldMore">
                <div class='sign-more' v-if="selectUserType=='sign'">
                     <el-radio v-model="signType" label="before">前加签</el-radio>
                     <el-radio v-model="signType" label="after">后加签</el-radio>
                </div>
            </div>
        </div>
        
        <div slot="footer" class="dialog-footer">
            <el-button icon="el-icon-close" @click="visibleInChild = false">取消</el-button>
            <el-button icon="el-icon-check" type="primary" @click="confirm">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import Pagination from '@/components/Pagination'
    import {getAction} from '@/api/manage'
    import {Message} from 'element-ui'

    export default {
        name: "SelectUser",
        components: {Pagination},
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            multipleSelect: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: ''
            },
            appendToBody: {
                type: Boolean,
                default: false
            },
            selectUserType:{
                type: String,
                default: ''
            }
        },
        data() {
            return {
                filterText: '',
                treeData: [],
                signType:'before',
                defaultProps: {
                    children: 'children',
                    label: 'title',
                    isLeaf: 'hasChildren',
                    data: 'data'
                },
                records: [],
                total: 0,
                selectedRecords: [],
                listQuery: {
                    current: 1,
                    size: 10,
                    userId: undefined,
                    userName: undefined,
                    deptId: undefined
                },
                currOrgId: ''
            }
        },
        watch: {
            filterText(val) {
                this.$refs._selectOrgTree.filter(val)
            }
        },
        computed: {
            visibleInChild: {
                get() {
                    return this.visible
                },
                set(val) {
                    this.$emit('update:visible', val)
                }
            }
        },
        methods: {
            close() {
                this.visibleInChild = false;
            },
            filterNode(value, data) {
                if (!value) return true
                return data.label.indexOf(value) !== -1
            },
            getTreeData() {
                getAction('/api/blade-system/dept/tree', {type: this.type}).then(res => {
                    
                    const data = res.data.data
                    this.treeData = data
                })
            },
            handleNodeClick(node) {
                this.currOrgId = node.id
                this.listQuery.deptId = this.currOrgId
                this.listSysUsers()
            },
            listSysUsers() {
                
                getAction('/api/blade-system/user-admin/list', this.listQuery).then(res => {
                    const data = res.data.data
                    this.records = data.records;
                    this.total = data.total
                })
            },
            btnQuery() {
                this.listQuery.current = 1
                this.listQuery.deptId = undefined
                this.listSysUsers()
            },
            btnReset() {
                this.currOrgId = ''
                this.listQuery = {
                    current: 1,
                    size: 10,
                    userId: undefined,
                    userName: undefined,
                    orgId: undefined,
                    deptId:undefined
                }
                
                this.listSysUsers()
            },
            rowClick(row) {
                if (!this.multipleSelect) {
                    this.selectedRecords = []
                    this.selectedRecords[0] = row
                } else {
                    let arr = this.selectedRecords
                    let index = arr.findIndex(item => item.userId === row.userId)
                    if (index < 0) {
                        arr.push(row)
                    } else {
                        arr.splice(index, 1)
                    }
                }
            },
            btnRemoveAll() {
                this.selectedRecords = []
            },
            btnRemove(row) {
                let arr = this.selectedRecords;
                arr.splice(arr.findIndex(item => item.userId === row.userId), 1)
            },
            confirm() {
                if (!this.selectedRecords || this.selectedRecords.length == 0) {
                    Message.error('请先选择用户')
                    return
                }
                let params = []
                params.push(this.selectedRecords)
                if(this.selectUserType == 'sign'){
                    params.push(this.signType)
                }
                if (this.multipleSelect) {
                    this.$emit("selectUserFinished", ...params);
                } else {
                    this.$emit("selectUserFinished", params[0][0]);
                }
                this.selectedRecords = []
                this.records = []
                this.visibleInChild = false;
            }
        }
    }
</script>

<style scoped>
 .sign-more{
    width: 184px;
    float: right;
    height: 40px;
    line-height: 40px;
 }
</style>>